<template>
  <div class="tag-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
          <h5>基础用法</h5>
          <popover-view
            placement="top-start"
            title="标题"
            width="200"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            <el-button slot="reference">hover 激活</el-button>
            </popover-view>
             <popover-view
                placement="bottom"
                title="标题"
                width="200"
                trigger="click"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <el-button slot="reference">click 激活</el-button>
            </popover-view>

            <popover-view
                placement="right"
                title="标题"
                width="200"
                trigger="focus"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <el-button slot="focus">focus 激活</el-button>
            </popover-view>

            <popover-view
                placement="bottom"
                title="标题"
                width="200"
                trigger="manual"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                :visiable="visible">
                <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
            </popover-view>
            <br><br>
            <h5>嵌套信息</h5>
            <popover-view
                placement="bottom"
                width="600"
                trigger="hover"
                >
                <span>日期：2018年10月 &nbsp;&nbsp;主体类型：全部 &nbsp;&nbsp;区域：全部&nbsp;&nbsp;登记机关：全部&nbsp;&nbsp;属地监管部门：全部</span>
                <el-button slot="reference">显示查询条件</el-button>
            </popover-view>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabProps" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabMethods" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import PopoverView from '../../components/el-extend-components/PopoverView/PopoverView'

export default {
  name: 'PopoverDemo',
  components:{
    // PopoverView
  },
  data() {
    return {
        visible: false,
        tabProps:[
            {
                name:'trigger',
                desc:'触发方式。类型：String。	可选值：click/focus/hover/manual。	默认值：click'
            },
            {
                name:'title',
                desc:'标题。类型：String。'
            },
            {
                name:'content',
                desc:'显示的内容，也可以通过 slot 传入 DOM。类型：String。'
            },
            {
                name:'width',
                desc:'宽度。类型：String/Number。	默认值：最小宽度 150px'
            },
            {
                name:'placement',
                desc:'出现位置。类型：String。	可选值：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endl。	默认值：bottom'
            },
            {
                name:'disabled',
                desc:'Popover 是否可用。类型：Boolean。	默认值：false'
            },
            {
                name:'offset',
                desc:'出现位置的偏移量。类型：Number。	默认值：0'
            },
            {
                name:'transition',
                desc:'定义渐变动画。类型：String。	默认值：fade-in-linear'
            },
            {
                name:'visible-arrow',
                desc:'是否显示 Tooltip 箭头。类型：Boolean。	默认值：true'
            },
            {
                name:'open-delay',
                desc:'触发方式为 hover 时的显示延迟，单位为毫秒。类型：Number。'
            },
            {
                name:'close-delay',
                desc:'触发方式为 hover 时的隐藏延迟，单位为毫秒。类型：Numberg。	默认值：200'
            },
        ],
        tabMethods:[
            {
                name:'show',
                desc:'显示时触发'
            },
            {
                name:'after-enter',
                desc:'显示动画播放完毕后触发'
            },
            {
                name:'hide',
                desc:'隐藏时触发'
            },
            {
                name:'after-leave',
                desc:'隐藏动画播放完毕后触发'
            }
        ]
    }
  },
  computed: {
    
  },
  mounted() {
    
  },
  methods: {
  
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tag-demo-wrapper {
  width: 100%;
  height: 100%;
}

</style>
